import React, { useEffect, useState } from "react";
import { Button, Page, useNavigate } from "zmp-ui";
import { useRecoilValue, useSetRecoilState } from "recoil";
import { storageIdState, userState } from "../../state";
import request from "../../utils/request";
import { showToast } from "zmp-sdk";
import "./Index.scss";
import util from "../../utils/util";
import copy from "copy-to-clipboard";

const StoragePage = () => {
  const user = useRecoilValue(userState);
  const navigate = useNavigate();
  const storageId = useRecoilValue(storageIdState);
  const [detail, setDetail] = useState({});
  // 获取仓库详情
  const getDetail = () => {
    const url = "page/storageDetails";
    request.get(url + "&wxapp_id=10001", { id: storageId }).then((res) => {
      const detail = res.data;
      setDetail(detail);
    });
  };
  const handleClick = (e) => {
    copy(e.target.dataset.text);
    showToast({
      message: "复制成功",
    });
  };
  useEffect(() => {
    console.log("模拟componentDidMount第一次渲染");
    util.setBarPageView("仓库详情");
    getDetail();
    return () => {
      console.log("模拟componentWillUnmount执行销毁后");
    };
  }, []);
  return (
    <Page className="page storage">
      <div className="container" style={{ paddingBottom: 15 + "px" }}>
        <div className="row">
          <div className="row-label">收件人</div>
          <div className="row-content">{detail["linkman"]}</div>
          <div
            className="btn-copy"
            onClick={(e) => handleClick(e)}
            data-text={detail["linkman"]}
          >
            复制
          </div>
        </div>
        <div className="row">
          <div className="row-label">手机号码</div>
          <div className="row-content">{detail["phone"]}</div>
          <div
            className="btn-copy"
            onClick={(e) => handleClick(e)}
            data-text={detail["phone"]}
          >
            复制
          </div>
        </div>
        <div className="row">
          <div className="row-label">收件地址</div>
          <div className="row-content">{detail["address"]}</div>
          <div
            className="btn-copy"
            onClick={(e) => handleClick(e)}
            data-text={detail["address"]}
          >
            复制
          </div>
        </div>
        <div className="row">
          <div className="row-label">邮编</div>
          <div className="row-content">{detail["post"]}</div>
          <div
            className="btn-copy"
            onClick={(e) => handleClick(e)}
            data-text={detail["post"]}
          >
            复制
          </div>
        </div>
        <Button
          className="btn-all-copy"
          onClick={(e) => handleClick(e)}
          data-text={
            detail["linkman"] +
            "|" +
            detail["phone"] +
            "|" +
            detail["address"] +
            "|" +
            detail["post"]
          }
        >
          一键复制
        </Button>
      </div>
      <div className="container">
        <div className="guide-title">
          <div className="guide-title-icon">
            <img src="https://zhuanyun.sllowly.cn/assets/api/images//dzx_img30.png"></img>
          </div>
          操作指引
        </div>
        <div className="guide-content">
          <div className="guide-item">
            <div className="guide-step">第一步：复制仓库地址</div>
            <div className="guide-content-text">
              复制仓库地址后前往购物平台下单，将仓库地址粘贴到购物平台收货地址中。
            </div>
          </div>
          <div className="guide-item">
            <div className="guide-step">第二步：预报包裹</div>
            <div className="guide-content-text">
              下单后可以在购物平台获取到快递单号，将快递单号预报系统中
            </div>
          </div>
          <div className="guide-item">
            <div className="guide-step">第三步：申请打包</div>
            <div className="guide-content-text">
              包裹到达仓库后，可向仓库申请打包出库。
            </div>
          </div>
          <div className="guide-item">
            <div className="guide-step">第四步：支付订单费用</div>
            <div className="guide-content-text">
              包裹打包完成后，可支付包裹运费费用，仓库即会快速发货。
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
};
export default StoragePage;
